/**
 * Created by xiangjiayu on 2017/6/26.
 * 订单详情
 */

import React from 'react';
import Immutable from 'immutable'
import {
    Button,
    Col,
    DatePicker,
    Icon,
    Input,
    Modal,
    Row,
    Select,
    Steps,
    Table,
    Tabs,
    Tag,
    Timeline,
    Tooltip
} from 'antd';
import MyIcon from '../../components/common/MyIcon/MyIcon'; //自定义字体图标
import ImageList from 'upload/ImageList'

const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const { MonthPicker, RangePicker } = DatePicker;//日历
const Step = Steps.Step;                //步骤条
const Search = Input.Search;    //搜所框
const TabPane = Tabs.TabPane;


export default class AuntInfo  extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            mode: 'left',
            //月嫂图片
            previewVisible: false,
            previewImage: '',
            fileList: [
              {
                uid: -1,
                name: '生活照',
                status: 'done',
                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
              }, {
                uid: -2,
                name: '生活照',
                status: 'done',
                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
              }
            ],
            Modalpictrue:false, //图片展示
            Modalvideo:false, //视频展示
        }
    }
    showModalpictrue(Modalpictrue) {
        this.setState({ Modalpictrue });
    }
    showModalvideo(Modalvideo) {
        this.setState({ Modalvideo });
    }
    handleModeChange = (e) => {
        const mode = e.target.value;
        this.setState({ mode });
    }
    // 图片
    handleCancel = () => this.setState({ previewVisible: false })
    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }
    render(){
        const { mode } = this.state;
        //表格
        const dataSource = [
          {
            key: '1',
            time: '2017-07-02 19:41:45',
            id: 'A04040404',
            content: '我更改了月嫂信息',
            people:'我'
            },{
                key: '2',
                time: '2017-07-02 19:41:45',
                id: 'A04040404',
                content: '我更改了月嫂信息我更改了月嫂信息我更改了月嫂信息',
                people:'我'
            }
        ];
        const columns = [
          {
            title: '操作时间',
            dataIndex: 'time',
            key: 'time',
            width:'20%'
          }, {
            title: '月嫂编号',
            dataIndex: 'id',
            key: 'id',
            width:'20%'
          }, {
            title: '操作内容',
            dataIndex: 'content',
            key: 'content',
            render:(value)=>{
                return (
                    <div>
                        {
                            value.length > 16 ? <Tooltip placement="topLeft" title={value}><span>{value ? value.substr(0, 16) : ''}</span></Tooltip> : <span>{value}</span>
                        }
                    </div>
                )
            },
          }, {
            title: '操作人',
            dataIndex: 'people',
            key: 'people',
            width:'20%'
          }
        ];
        //活动信息
        const dataSource_bm = [
              {
                key: '1',
                name: '免门票',
                price: 100,
                num: 100,
                xiangou:100,
                sale:10
              }, {
                key: '2',
                name: '免门票',
                price: 100,
                num: 100,
                xiangou:100,
                sale:10
              }
          ];
        const columns_bm = [
              {
                title: '票名称',
                dataIndex: 'name',
                key: 'name',
                className: 'ant-table-th-center'
              }, {
                title: '票价(元)',
                dataIndex: 'price',
                key: 'price',
                className: 'ant-table-th-center'
              }, {
                title: '数量',
                dataIndex: 'num',
                key: 'num',
                className: 'ant-table-th-center'
              }, {
                title: '没人限购',
                dataIndex: 'xiangou',
                key: 'xiangou',
                className: 'ant-table-th-center'
              }, {
                title: '已售',
                dataIndex: 'sale',
                key: 'sale',
                className: 'ant-table-th-center'
              }
          ];
        //小票
        const dataSource_ticket = [
          {
            key: '1',
            name: '票号',
            price: 100,
            num: 100,
            xiangou:100,
            sale:10
          }, {
            key: '2',
            name: '免门票',
            price: 100,
            num: 100,
            xiangou:100,
            sale:10
              }
          ];
        const columns_ticket = [
          {
            title: '票名称',
            dataIndex: 'name',
            key: 'name',
            className: 'ant-table-th-center'
          }, {
            title: '票价(元)',
            dataIndex: 'price',
            key: 'price',
            className: 'ant-table-th-center'
          }, {
            title: '数量',
            dataIndex: 'num',
            key: 'num',
            className: 'ant-table-th-center'
          }, {
            title: '没人限购',
            dataIndex: 'xiangou',
            key: 'xiangou',
            className: 'ant-table-th-center'
          }, {
            title: '已售',
            dataIndex: 'sale',
            key: 'sale',
            className: 'ant-table-th-center'
          }
        ];
        //工作流程
        const dataSource_gzlc = [
          {
            key: '1',
            name: '缓解四肢关节胀痛',
            time: '2017-11-24 00:00-2017-11-25 00:00',
            aunt: '迪丽热巴',
            phone:18061470286
          },
          {
            key: '2',
            name: '缓解四肢关节胀痛-缓解四肢关节胀痛-缓解四肢关节胀痛',
            time: '2017-11-24 00:00-2017-11-25 00:00',
            aunt: '迪丽热巴迪丽热巴',
            phone:18061470286
          }
        ];
        const columns_gzlc = [
        {
          title: '服务名称',
          dataIndex: 'name',
          key: 'name',
          width:'30%',
          render:(value)=>{
            return (
              <div>
                {
                  value.length > 16 ? <Tooltip placement="topLeft" title={value}><span>{value ? value.substr(0, 16) : ''}</span></Tooltip> : <span>{value}</span>
                }
              </div>
            )
          },
        }, {
          title: '服务时间',
          dataIndex: 'time',
          key: 'time',
          width:'30%',
          className: 'ant-table-th-center',
          render:(value)=>{
              return (
                <div>
                  {value}
                  <a href="#" className="col-blue ml5">更改</a>
                </div>
              )
          },
        }, {
          title: '服务月嫂',
          dataIndex: 'aunt',
          key: 'aunt',
          width:'30%',
          className: 'ant-table-th-center',
          render:(value)=>{
              return (
                <div className="table-aunt-tx">
                   <MyIcon type="aunt"/>
                   <span className="link-before-name">
                       {
                         value.length > 5 ? <Tooltip placement="topLeft" title={value}><span>{value ? value.substr(0, 5) : ''}</span></Tooltip> : <span>{value}</span>
                       }
                   </span>
                    <a href="#" className="col-blue ml5">更换月嫂</a>
                </div>
              )
          },
        }, {
          title: '联系电话',
          dataIndex: 'phone',
          key: 'phone',
          className: 'ant-table-th-center',
          render: (value) => {
            return (
              <div className="table-contact">
                <Tooltip placement="top" title={value}>
                    <span className="phone-span"><MyIcon type="phone"/></span>
                </Tooltip>
              </div>
            )
          },
        }
      ];

        const { previewVisible, previewImage, fileList } = this.state;
        const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return(
            <div className="info-cont">
                <div className="slip-slide">
                    <ul>
                        <li className="active"><a href="#"><span>资料</span></a></li>
                        <li><a href="#"><span>日志</span></a></li>
                        <li><a href="#"><span>记录</span></a></li>
                    </ul>
                </div>
                <div className="slip-title">
                    <div className="slip-base">
                        <div className="slip-left">
                            <h4>月嫂详情</h4>
                        </div>
                        <div className="slip-right">
                            <ul>
                                <li>门店：成龙快婿家政公司</li>
                                <li>处理人：熊师虎</li>
                                <li>来源：熊师虎</li>
                                <li>创建时间：2017-05-31 18:19:19</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="slip-body">
                    {/*基本信息*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">基本信息</span>
                            <div className="state-cont">
                                <span className="state state-blue">兼职</span>
                                <span className="state state-green">待岗</span>
                                <span className="state state-orange">普通月嫂</span>
                                <span className="state state-red">正式</span>
                                <span className="state state-grey">灰色</span>
                            </div>
                            <div className="slip-bdt">
                                <Button type="primary">简历</Button>
                                <Button type="primary">编辑</Button>
                                <Button type="primary">放入黑名单</Button>
                                <Button type="primary">兼职</Button>
                                <Button type="danger">删除</Button>
                            </div>
                        </div>
                        <div className="slip-cont-b">
                            <div className="info-cont">
                                <Row>
                                    <Col span="8">
                                        <span className="span-left">月嫂姓名：</span>
                                        <span className="span-right">王园园</span>
                                    </Col>
                                    <Col span="8">
                                        <span className="span-left">服务地址：</span>
                                        <span className="span-right">
                                        <Tooltip  placement="topLeft" title="波奥大厦波奥大厦波奥大厦波奥大厦波奥大厦波奥大厦">波奥大厦</Tooltip>
                                        <a href="javascript:void(0)" className="scale-map" onClick={() => this.setModalMapVisible(true)}>查看地址</a>
                                    </span>
                                    </Col>
                                    <Col span="8">
                                        <span className="span-left">联系方式：</span>
                                        <div className="info-contact">
                                            <Tooltip placement="top" title="18061470286">
                                                <span className="phone-span"><MyIcon type="phone"/></span>
                                            </Tooltip>
                                            <Tooltip placement="top" title="201526288">
                                                <span className="phone-span"><MyIcon type="qq"/></span>
                                            </Tooltip>
                                        </div>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="8">
                                        <span className="span-left">服务类型：</span>
                                        <span className="span-right">月嫂测试</span>
                                    </Col>
                                    <Col span="8">
                                        <span className="span-left">服务费用：</span>
                                        <span className="span-right">5000元/月</span>
                                    </Col>
                                    <Col span="8">
                                        <span className="span-left">服务内容：</span>
                                        <span className="span-right">
                                        <Tooltip  placement="topLeft" title="催乳、月子餐、产后恢复催乳、月子餐、产后恢复">催乳、月子餐、产后恢复</Tooltip>
                                    </span>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="8">
                                        <span className="span-left">服务天数：</span>
                                        <span className="span-right">42</span>
                                    </Col>
                                    <Col span="8">
                                        <span className="span-left">服务天数：</span>
                                        <span className="span-right">
                                            <Tag>Tag 1</Tag>
                                        </span>
                                    </Col>
                                    <Col span="8"></Col>
                                </Row>
                                <div className="border-top">
                                    <Row>
                                        <Col span="8">
                                            <span className="span-left">用工时间：</span>
                                            <span className="span-right">2017-05-31</span>
                                        </Col>
                                        <Col span="16">
                                            <span className="span-left">其他要求：</span>
                                            <span className="span-right">
                                            <Tooltip  placement="topLeft" title="hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh">客户要一个年轻一点的月嫂，可能要做月子餐</Tooltip>
                                        </span>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/*月嫂认证记录*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">月嫂认证记录</span>
                        </div>
                        <div className="slip-cont-b">
                            {/*搜索*/}
                            <div className="search-cont">
                                <Row gutter={16}>
                                    <Col span="5">
                                        <RangePicker  size="large"/>
                                    </Col>
                                    <Col span="5">
                                        <Input placeholder="请输入操作人姓名" size="large" />
                                    </Col>
                                    <div className="search-btncont search-btncontfr">
                                        <Button size="large" type="primary">搜索</Button>
                                    </div>
                                </Row>
                            </div>
                            {/*table*/}
                            <Table dataSource={dataSource} columns={columns} bordered />
                        </div>
                    </div>
                    {/*沟通记录*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">沟通记录</span>
                            <div className="slip-bdt">
                                <Button type="primary">添加</Button>
                            </div>
                        </div>
                        <div className="slip-cont-b">
                            <Timeline pending={<span className="col-grey">没有了...</span>}>
                                <Timeline.Item>
                                    <div className="gtjl-log-time">
                                        <h4>2017年07月12日</h4>
                                    </div>
                                    <div className="gtjl-log-cont">
                                        <Row gutter={16}>
                                            <Col span={3}>姓名：</Col>
                                            <Col span={21}>
                                                <a href="#" className="col-blue name">月嫂名字</a>
                                                <span className="col-grey">订单编号：JZ23400302</span>
                                            </Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>时间：</Col>
                                            <Col span={21}><Icon type="calendar" />2016-08-01 16:06:04</Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>沟通人：</Col>
                                            <Col span={21}>小金鱼</Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>公司：</Col>
                                            <Col span={21}>小金鱼家政公司</Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>评价：</Col>
                                            <Col span={21}>
                                                面试表现的不是很好，没有表现出平时应有的水准，客户也有些挑剔,面试表现的不是很好， 没有表现出平时应有的水准，客户也有些挑剔,面试表现的不是很好，没有表现出平时应有的水准，客户也有些挑剔
                                            </Col>
                                        </Row>
                                    </div>
                                </Timeline.Item>
                                <Timeline.Item>
                                    <div className="gtjl-log-time">
                                        <h4>2017年07月12日</h4>
                                    </div>
                                    <div className="gtjl-log-cont">
                                        <Row gutter={16}>
                                            <Col span={3}>姓名：</Col>
                                            <Col span={21}>
                                                <a href="#" className="col-blue name">月嫂名字</a>
                                                <span className="col-grey">订单编号：JZ23400302</span>
                                            </Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>时间：</Col>
                                            <Col span={21}><Icon type="calendar" />2016-08-01 16:06:04</Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>沟通人：</Col>
                                            <Col span={21}>小金鱼</Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>公司：</Col>
                                            <Col span={21}>小金鱼家政公司</Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>评价：</Col>
                                            <Col span={21}>
                                                面试表现的不是很好，没有表现出平时应有的水准，客户也有些挑剔,面试表现的不是很好， 没有表现出平时应有的水准，客户也有些挑剔,面试表现的不是很好，没有表现出平时应有的水准，客户也有些挑剔
                                            </Col>
                                        </Row>
                                    </div>
                                </Timeline.Item>
                            </Timeline>
                        </div>
                    </div>
                    {/*评价*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">评价</span>
                        </div>
                        <div className="slip-cont-b">
                            <Row>
                                <Col span="24">
                                    <span className="span-left">月嫂姓名：</span>
                                    <span className="span-right">普通哎呀</span>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="24">
                                    <span className="span-left">月嫂评价：</span>
                                    <span className="span-right">这个月嫂评价非常不错!这个月嫂评价非
                                        常不错!这个月嫂评价非常不错!这个月嫂评价非常不错!这个月嫂评价非
                                        常不错!这个月嫂评价非常不错!这个月嫂评价非常不错!</span>
                                </Col>
                            </Row>
                        </div>
                    </div>
                    {/*图片信息*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">图片信息</span>
                        </div>
                        <div className="slip-cont-b">
                            {/*图片纯展示状态才加right-info-pic这个div*/}
                           <ImageList data={Immutable.fromJS([{url:"http://img4.imgtn.bdimg.com/it/u=2440916856,3596786042&fm=200&gp=0.jpg",title:"呵呵哒"},{url:"http://img1.imgtn.bdimg.com/it/u=3543171430,695164887&fm=26&gp=0.jpg",title:"嘿嘿"}])} />
                        </div>
                    </div>
                    {/*视频信息*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">视频信息</span>
                        </div>
                        <div className="slip-cont-b">
                            {/*视频纯展示状态才加right-info-video这个div*/}
                            <div className="right-info-pic-info right-info-video-info">
                                <div className="clearfix">
                                    <div className="ant-upload-list ant-upload-list-picture-card">
                                        <div className="ant-upload-list-item ant-upload-list-item-done">
                                            <div className="ant-upload-list-item-info">
                                                <a className="ant-upload-list-item-thumbnail">
                                                    <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="生活照" />
                                                </a>
                                                <span className="ant-upload-list-item-name" title="视频信息">视频信息</span>
                                            </div>
                                            <span className="ant-upload-list-item-actions" onClick={() => this.showModalvideo(true)}>
                                                <a title="预览文件"><i className="anticon anticon-play-circle-o"></i></a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <Modal
                                    title="视频预览"
                                    wrapClassName="vertical-center-modal"
                                    visible={this.state.Modalvideo}
                                    onCancel={() => this.showModalvideo(false)}
                                    footer={null}
                                >
                                    <video className="video" width='100%' height='100%' controls="controls" src="http://movie.qianmi.com/c77f3875-be2b-4634-928e-73e51ec4d788.mp4"></video>
                                </Modal>
                            </div>
                        </div>
                    </div>
                    {/*为空状态*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">评价</span>
                        </div>
                        <div className="slip-cont-b">
                            <div className="empty">
                                <h4>
                                    <MyIcon type="empty"/>
                                    无*****
                                </h4>
                                <p>点击<a className="btn-link">****</a>添加</p>
                            </div>
                        </div>
                    </div>
                    {/*Tab切换*/}
                    <div className="slip-cont">
                        <div className="slip-cont-b">
                            <Tabs defaultActiveKey="1_1">
                                <TabPane tab={<span className="check-ticket-tab">待验票<i className="num">100</i></span>} key="1_1">
                                    {/*搜索*/}
                                    <div className="search-cont">
                                        <Row gutter={16}>
                                            <Col span="5">
                                                <Input placeholder="input输入框" size="large" />
                                            </Col>
                                            <Col span="5">
                                                <Select defaultValue="选择下拉框" size="large">
                                                    <Option value="选择下拉框">选择下拉框</Option>
                                                </Select>
                                            </Col>
                                            <div className="search-btncont search-btncontfr">
                                                <Button size="large" type="primary">搜索</Button>
                                            </div>
                                        </Row>
                                    </div>
                                    {/*table*/}
                                    <Table dataSource={dataSource_ticket} columns={columns_ticket} size="middle" bordered />
                                </TabPane>
                                <TabPane tab={<span className="check-ticket-tab">已验票<i className="num">100</i></span>} key="1_2">
                                  {/*搜索*/}
                                    <div className="search-cont">
                                        <Row gutter={16}>
                                            <Col span="5">
                                                <Input placeholder="input输入框" size="large" />
                                            </Col>
                                            <Col span="5">
                                                <Select defaultValue="选择下拉框" size="large">
                                                    <Option value="选择下拉框">选择下拉框</Option>
                                                </Select>
                                            </Col>
                                            <div className="search-btncont search-btncontfr">
                                                <Button size="large" type="primary">搜索</Button>
                                            </div>
                                        </Row>
                                    </div>
                                  {/*table*/}
                                    <Table dataSource={dataSource_ticket} columns={columns_ticket} size="middle" bordered />
                                </TabPane>
                            </Tabs>
                        </div>
                    </div>
                    {/*活动信息*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">活动信息</span>
                        </div>
                        <div className="slip-cont-b">
                            <div className="info-cont">
                                <Row>
                                    <Col span="24">
                                        <span className="span-left">活动时间：</span>
                                        <span className="span-right">2017-10-10 10:10:10 ~ 2017-10-10 10:10:10</span>
                                        <Tag style={{'marginLeft':'8px'}}>未开始</Tag>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="24">
                                        <span className="span-left">活动地址：</span>
                                        <span className="span-right">北京市</span>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="24">
                                        <span className="span-left">报名截止：</span>
                                        <span className="span-right">2017-10-10 10:10:10</span>
                                        <Tag style={{'marginLeft':'8px'}} color="blue">报名中</Tag>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="24">
                                        <span className="span-left">报名费用：</span>
                                        {/*table*/}
                                        <Table dataSource={dataSource_bm} pagination={false} columns={columns_bm} size="middle" bordered />
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </div>
                    {/*工作流程*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">工作流程</span>
                        </div>
                        <div className="slip-cont-b">
                            {/*工作流程table*/}
                            <Table dataSource={dataSource_gzlc} pagination={false} columns={columns_gzlc} size="middle" bordered />
                        </div>
                    </div>
                    {/*过程信息*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">过程信息</span>
                        </div>
                        <div className="slip-cont-b">
                            <div className="slip-cont-steps">
                                <Steps current={1} progressDot={true}>
                                    <Step title="创建订单" description="2017-09-09" />
                                    <Step title="签订合同" description="2018-09-09" />
                                    <Step title="开始服务" description="2019-09-09" />
                                    <Step title="服务完成" description="2020-09-09" />
                                </Steps>
                            </div>
                        </div>
                    </div>
                    {/*费用收取*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">费用收取</span>
                        </div>
                        <div className="slip-cont-b">
                            <div className="collect-fees">
                                <p>
                                    服务价格
                                    <span className="num">200</span>
                                    元（已收
                                    <span className="num">150</span>
                                    ,待收
                                    <span className="num">50</span>
                                    元）
                                </p>
                                <div className="collect-fees-btn">
                                    <Button size="large" className="btn-orange" type="primary">收款</Button>
                                </div>
                                <div className="collect-fees-btn">
                                    <span className="state-finished"><MyIcon type="finished"/>已结清</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/*合同*/}
                    <div className="slip-cont">
                      <div className="slip-cont-title">
                        <span className="span-bdw">请填写合同内容</span>
                        <span className="slip-bdt">
                            <ButtonGroup>
                              <Button type="primary">双方</Button>
                              <Button>三方</Button>
                            </ButtonGroup>
                            <Button type="primary">预览合同</Button>
                          </span>
                      </div>
                      <div className="slip-cont-b">
                        <div className="add-cont hetong">
                          <Row gutter={16}>
                            <Col span={3} className="text-r">
                              <div className="ant-form-item-label">
                                <label><span className="span-left">甲方（客户）</span></label>
                              </div>
                            </Col>
                            <Col span={5}>
                              <Input placeholder="请输入客户姓名" size="large"/>
                            </Col>
                            <Col span={5}>
                              <Input placeholder="请输入客户电话" size="large"/>
                            </Col>
                            <Col span={5}>
                              <Input placeholder="请输入客户身份证号" size="large"/>
                            </Col>
                          </Row>
                          <Row gutter={16}>
                            <Col span={3} className="text-r"></Col>
                            <Col span={15}>
                              <Input placeholder="请输入客户家庭住址" size="large"/>
                            </Col>
                          </Row>
                          <Row gutter={16}>
                            <Col span={3} className="text-r">
                              <div className="ant-form-item-label">
                                <label><span className="span-left">乙方（月嫂）</span></label>
                              </div>
                            </Col>
                            <Col span={5}>
                              <Input placeholder="请输入月嫂姓名" size="large"/>
                            </Col>
                            <Col span={5}>
                              <Input placeholder="请输入月嫂电话" size="large"/>
                            </Col>
                            <Col span={5}>
                              <Input placeholder="请输入月嫂身份证号" size="large"/>
                            </Col>
                            <Col span={3}>
                              <Button type="primary" size="large">选择月嫂</Button>
                            </Col>
                          </Row>
                          <Row gutter={16}>
                            <Col span={3} className="text-r"></Col>
                            <Col span={15}>
                              <Input placeholder="请输入月嫂家庭住址" size="large"/>
                            </Col>
                          </Row>
                          <Row gutter={16}>
                            <Col span={3} className="text-r">
                              <div className="ant-form-item-label">
                                <label><span className="span-left">丙方（公司）</span></label>
                              </div>
                            </Col>
                            <Col span={5}>
                              <span className="name">公司名称</span>
                              斑马
                            </Col>
                            <Col span={5}>
                              <span className="name">联系电话</span>
                              18061470286
                            </Col>
                            <Col span={10}>
                              <span className="name">公司地址</span>
                              软件大道118号上市
                            </Col>
                          </Row>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        )
    }
}